/*
弹性布局
    display:flex;
影响的是子元素的排列方式
    1.所有的元素按照 主轴(默认主轴是x轴，侧轴是y轴) 方向排列
    2.更改主轴方向 flex-direction: column(row);
    3.弹性布局中的子元素不会自动换行，空间不够会等比压缩
    4.自动换行 flex-wrap: wrap;
子元素排列
    5.justify-content ：flex-start,flex-end,center,space-around,space-between
    6.align-items : flex-start,flex-end,center
给子元素的样式，表示占几份
    7.flex
*/
body{
    margin: 0;
}

.box{
    width: 1200px;
    height: 600px;
    display: flex;
    /* flex-direction: column; */
    /* flex-wrap: wrap; */
    /* justify-content: space-between; */
    /* align-content:space-around; */
    border: 1px solid #000;
}

.box div{
    width: 100px;
    height: 100px;
    background-color: #f00;
    color: #fff;
}

.box div:nth-child(odd){
    background-color: #fc3;
}

.box div:nth-child(1){
    flex:1;
}

.box div:nth-child(2){
    flex:2;
}

.box div:nth-child(3){
    flex:1;
}

.box div:nth-child(4){
    flex:2;
}

span{
    width: 100px;
    height: 100px;
    background-color: #0f0;
}